tsparticles-particles.js

tsParticles Particles.js Compatibility Package

tsParticles particles.js compatibility library.

How to use it

CDN / Vanilla JS / jQuery

The CDN/Vanilla version JS has two different files:

• One is a bundle file with all the scripts included in a single file
• One is a file including just the initPjs function to load the tsParticles/particles.js compatibility

Bundle

Including the tsparticles.pjs.bundle.min.js file will work exactly like v1, you can start using the tsParticles, the particlesJS instance, or the Particles object in the same way.

Not Bundle

This installation requires more work since all dependencies must be included in the page. Some lines above are all specified in the Included Packages section.

Usage

Once the scripts are loaded you can set up tsParticles or particlesJS like this:

const { particlesJS } = initPjs(tsParticles); // not needed if using the bundle script, required for any other installation

particlesJS("tsparticles", {
  /* options */
});

// or

tsParticles.load({
  id: "tsparticles",
  options: {
    /* options */
  },
});

Options

Here you can use ParticlesJS or tsParticles options, they will work both fine.

Alternative Usage

const { Particles } = initPjs(tsParticles); // not needed if using the bundle script, required for any other installation

Particles.init({
  /* options */
});

Particles Options (only for Particles.init)

Option	Type	Default	Description
selector	string	-	Required: The CSS selector of your canvas element
maxParticles	integer	100	Optional: Maximum amount of particles
sizeVariations	integer	3	Optional: Amount of size variations
speed	integer	0.5	Optional: Movement speed of the particles
color	string or string[]	#000000	Optional: Color(s) of the particles and connecting lines
minDistance	integer	120	Optional: Distance in px for connecting lines
connectParticles	boolean	false	Optional: true/false if connecting lines should be drawn or not
responsive	array	null	Optional: Array of objects containing breakpoints and options

Responsive Options

Option	Type	Default	Description
breakpoint	integer	-	Required: Breakpoint in px
options	object	-	Required: Options object, that overrides default values

Methods

Method	Description
pauseAnimation	Pauses/stops the particle animation
resumeAnimation	Continues the particle animation
destroy	Destroys the plugin

Changelog

2.12.0 (2023-08-03)

Bug Fixes

• fix issue with change theme when an existing canvas is used (2c4c7cd)
• fix issue with change theme when an existing canvas is used (a349b97)
• fixed issue with some plugins that were drawn before the canvas clear (4cff7e6)
• fixed light interaction, particle shadow wasn't calculated correctly (da86a37)
• fixed memory leak in destroyed particles by updaters, the z array wasn't filtered (272bb47), closes #5101
• fixed out mode bounce (aafaa08)
• fixed out modes, bounce was not checking the direction of the update request (e2b2c94)
• fixed pool on particles destroyed by updaters (1f62e29)

Features

• added range values to life duration and delay of emitters (18bc70d)
• added two new bundles: basic and all (489f591)